import React, { Component } from 'react'
import { Text,StyleSheet, ScrollView, View } from 'react-native'

export default class AligmItems extends Component {
  render() {
    return (
      <View style={{height: '100%'}}>
        <Text style={styles.h2}> 交叉轴上的对齐方式 </Text>
        <ScrollView>
            <Text style={styles.h3}> aligmItems: 'flex-start' </Text>
            <View style={[styles.container,styles.Row,styles.aligmItemsFlexStart]}>
                <Text style={styles.itemBase}>刘备</Text>
                <Text style={styles.itemBase}>张飞</Text>
                <Text style={styles.itemBase}>关羽</Text>
            </View>
            <Text style={styles.h3}> aligmItems: 'center' </Text>
            <View style={[styles.container,styles.Row,styles.aligmItemsCenter]}>
                <Text style={styles.itemBase}>刘备</Text>
                <Text style={styles.itemBase}>张飞</Text>
                <Text style={styles.itemBase}>关羽</Text>
            </View>
            <Text style={styles.h3}> aligmItems: 'flex-end' </Text>
            <View style={[styles.container,styles.Row,styles.aligmItemsFlexEnd]}>
                <Text style={styles.itemBase}>刘备</Text>
                <Text style={styles.itemBase}>张飞</Text>
                <Text style={styles.itemBase}>关羽</Text>
            </View>
            <Text style={styles.h3}> aligmItems: 'stretch' </Text>
            <View style={[styles.container,styles.Row,styles.aligmItemsStretch]}>
                <Text style={[styles.itemBase,{height: '100%'}]}>刘备</Text>
                <Text style={[styles.itemBase,{height: '100%'}]}>张飞</Text>
                <Text style={[styles.itemBase,{height: '100%'}]}>关羽</Text>
            </View>
            <Text style={[styles.h3]}> aligmItems: 'baseline' </Text>
            <View style={[styles.container,styles.Row,styles.aligmItemsBaseline]}>
                <Text style={[styles.itemBase,{height: '100%'}]}>刘备</Text>
                <Text style={[styles.itemBase,{fontSize: 60,height: '100%'}]}>张飞</Text>
                <Text style={[styles.itemBase,{fontSize: 40,height: '100%'}]}>关羽</Text>
            </View>
        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container:{
      height: 150,
      margin: 10,
      borderWidth: 1,
      borderColor: '#ddd',
  },
  h2:{
    fontSize: 30,
    marginHorizontal: 10,
    marginTop: 50,
  },
  h3:{
    fontSize: 24,
    marginHorizontal: 10,
  },
  itemBase:{
    height: 30,
    borderWidth: 1,
    borderColor: 'red',
    backgroundColor: '#dfb',
    padding: 4,
    textAlign: 'center',
  },
  Row:{
    flexDirection: 'row',
  },
  aligmItemsFlexStart:{
    alignItems: 'flex-start',
  },
  aligmItemsCenter:{
    alignItems: 'center',
  },
  aligmItemsFlexEnd:{
    alignItems: 'flex-end',
  },
  aligmItemsStretch:{
    alignItems: 'stretch',
  },
  aligmItemsBaseline:{
    alignItems: 'baseline',
  },
})

